<template>
  <button @click="handleClick"
          :class="{
  'btn-default':type==='default',
  'btn-primary':type==='primary',
  'btn-success':type==='success',
  'normal':size==='normal',
  'large':size==='large',
  'mini':size==='mini',
  'common':size==='common',
  'plain':plain,
  'disabled':disabled
  }" :disabled="disabled">
    <slot></slot>
  </button>
</template>

<script>
  /**
   * @desc 按钮组件
   * @param [type] 按钮类型
   * @param [size] 按钮尺寸
   * @param [plain] 空心
   * @param [disabled] 是否禁用
   *
   * @event [click] 点击按钮触发事件
   */
  export default {
    name: 'tsButton',
    props: {
      type: {type: String, default: 'default'},
      size: {type: String, default: 'normal'},
      plain: Boolean,
      disabled: Boolean
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variables";
  @import "../../../assets/css/mixin";

  button {
    border: 0;
    letter-spacing: .02rem;
    border-radius: 3px;
  }

  .normal {
    @include wh(1.85rem, .52rem);
    font-size: .24rem;
  }

  .large {
    @include wh(100%, .86rem);
    font-size: .30rem;
  }

  .mini {
    @include wh(.94rem, .36rem);
    font-size: .22rem;
  }

  .common {
    @include wh(2.40rem, .76rem);
    font-size: .28rem;
    font-family: inherit;
  }

  .btn-default {
    border: 1px solid #909090;
    color: #909090;
    background-color: #fff;
    &:active {
      background-color: #ccc;
    }
  }

  .btn-primary {
    color: #fff;
    background-color: $themeColor;
    &.disabled {
      background-color: #C6C6C6;
    }
    &:active {
      background-color: #176199;
    }
    &.plain {
      color: $themeColor;
      border: 1px solid $themeColor;
      &:active {
        background-color: lightblue;
      }
    }
  }

  .btn-success {
    color: #ffffff;
    background-color: #56d176;
    &:active {
      background-color: forestgreen;
    }
    &.plain {
      color: #56d176;
      border: 1px solid #56d176;
    }
  }

  .plain {
    background-color: #ffffff;
  }

</style>


